//获取当前页面的路径 来源是路由提供的
import React, { Component } from 'react'
import logoImage from './assets/React.jpeg'
import {Outlet, Link} from 'react-router-dom' // 引入子路由
import "./css/Apply.css"
import storage from './Utils/storage'
import ShoppingCartNum from './pages/ShoppingCart/ShoppingCartNum'

class Apply extends Component {
  constructor () {
    super();
  }

  render () {
    //创建样式方法
    const search = {width:'235px'}
    return (
      <div>
        {/* 快捷键 ul>li*3>a */}
        <div className="dhdiv">
          <div className="login_text">
            欢迎 <label className='userLableStyle'>{storage.get("userObj")!== null ?  storage.get("userObj").nickname : ''} </label> 登录系统
          </div>
          <ul>
            <li className='btn btn-link'><Link to="/index" className='btn btn-link'><img className="logoImg" src={logoImage} alt="loginImg"/></Link></li>
            <li className='btn btn-link'><Link to="/toProductType" className='btn btn-link'>分类</Link></li>
            <li className='btn btn-link'><Link to="/toBrand" className='btn btn-link'>品牌</Link></li>
            <li className='btn btn-link'><button className='btn btn-link'>商家</button> </li>
            <li className='btn btn-link'><Link to="/toProductinfo" className='btn btn-link'>商品</Link> </li>
            <li className='btn btn-link'><input style={search} type="text" className="form-control" name="search" id="search" placeholder="请输入商品｜商家｜品牌｜分类"/></li>
            <li className="btn btn-link"><Link to="/toArea" className='btn btn-link'>区域</Link> </li>
            <li className="btn btn-link"><Link to="/toUser" className='btn btn-link'>用户</Link> </li>
            <li className="btn btn-link"><Link className='btn btn-link' to='/toInterest'>关注</Link> </li>
            <li className="btn btn-link"><Link className='btn btn-link' to="/login">登录</Link> </li>
            <li className="btn btn-link">
              <ShoppingCartNum/>
            </li>
            <li className="btn btn-link"><Link to="/toHandsontable">Handsontable</Link></li>
            {/*<li className="btn btn-link"><button className='btn btn-link'>注册</button> </li>*/}
          </ul>
        </div>
        <hr />
        {/* 引入子路由 */}
        <Outlet/>
        <br/>
      </div>
    )
  }
}

export default Apply

